<!-- 脸像检测页面 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
  <link rel="stylesheet" href="../res/css/weui.css" />
  <link rel="stylesheet" href="../res/css/weuix.css" />
  <link rel="stylesheet" href="../res//css/common.css" />
  <link rel="stylesheet" href="../res/css/swiper.css" />
  <script src="../res/js/zepto.min.js"></script>
  <script src="../res/js/zepto.weui.js"></script>
  <script src="../res/js/common.js?v=1"></script>
  <script src="../res/js/swiper.js"></script>
</head>
<style>
  .careful {
    width: 60%;
    margin-left: calc(20%);
    margin-top: 80px;
    display: flex;
    cursor: pointer;
  }

  .careful p {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
    line-height: 24px;
  }

  .carefulIOS {
    width: 60%;
    margin-left: calc(20%);
    margin-top: 80px;
    display: flex;
    cursor: pointer;
  }

  .carefulIOS p {
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
    line-height: 24px;
  }

  #takePhoto {
    width: 100%;
    position: relative;
    background-color: black;
  }

  canvas {
    image-rendering: pixelated;
  }

  #takePhotoIOS {
    width: 100%;
    position: relative;
    background-color: black;
  }

  .img_camera {
    width: 40px;
    height: 40px;
    left: calc(5%);
    top: 25px;
    position: absolute;
  }

  .img_signal {
    width: 40px;
    height: 40px;
    right: calc(5%);
    top: 25px;
    position: absolute;
  }

  .img_face {
    width: 80%;
    position: absolute;
    height: 350px;
    opacity: 0.3;
    z-index: 500;
    margin-left: calc(10%);
  }

  #video {
    width: 100%;
    position: absolute;
    height: 350px;
  }

  .backGround {
    width: 100%;
    height: 100vh;
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    z-index: 999;
  }

  .messageBox {
    width: 80%;
    height: 300px;
    position: fixed;
    top: 200px;
    margin: 0 10%;
    background: #FFFFFF;
    border-radius: 20px;
    z-index: 1000;
  }

  .messageBox .title {
    width: 100%;
    height: 70px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #353535;
    line-height: 70px;
    text-align: center;
  }

  .messageBox .content {
    width: 90%;
    margin: 10px 5%;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #353535;
    line-height: 25px;
  }

  .tip {
    width: 90%;
    margin: 10px 5%;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #E04342;
  }

  .button {
    width: 80%;
    margin: 20px 10%;
    height: 40px;
    background: #03A6FF;
    border-radius: 20px;
    line-height: 40px;
    text-align: center;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #FFFFFF;
  }
</style>
<script>
  window.onload = function () {
    var video = document.getElementById("video"); //video元素
    var canvas = document.getElementById("canvas"); //canvas元素
    var context = canvas.getContext("2d");
    var index = 0;
    var constraintsList = [{
        video: {
          facingMode: "user",
        },
      },
      {
        video: {
          facingMode: {
            exact: "enviroment",
          },
        },
      },
    ];
    $('.button').click(()=>{
      $(".messageBox").hide()
      $(".backGround").hide()
      capture();
    })

    $("#btnBack").click(function () {
      goPageNo(-1);
    });

    //安卓部分照相代码
    //摄像拍照
    function capture() {
      //constraints参数
      const constraints = constraintsList[index];

      //成功的回调函数
      function success(stream) {
        //兼容的webkit核心浏览器
        var CompatibleUrl = window.URL || window.webkitURL;
        //将视频流内容设置为video元素的源(注意：此处因为使用的是比较新的浏览器，必须直接设置，否则报错)
        //如果使用的不是较新的浏览器，可以这样设置：video.src = CompatibleUrl.createObjectURL(stream)
        video.srcObject = stream;
        video.play();
      }
      //异常的回调函数
      function error(error) {
        console.log("访问媒体设备失败", error.name, error.message);
      }
      //访问用户媒体设备的兼容方法
      function getUserMedia(constrains, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices
            .getUserMedia(constrains)
            .then(success)
            .catch(error);
        } else if (navigator.webkitGetUserMedia) {
          navigator.webkitGetUserMedia(constrains, success, error);
        } else if (navigator.mozGetUserMedia) {
          navigator.mozGetUserMedia(constrains, success, error);
        } else if (navigator.getUserMedia) {
          navigator.getUserMedia(constrains, success, error);
        }
      }
      if (
        navigator.mediaDevices.getUserMedia ||
        navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia
      ) {
        //调用用户媒体设备，访问摄像头
        getUserMedia(constraints, success, error);
      } else {
        alert("你的浏览器不支持访问用户媒体设备");
      }
    }

    //切换摄像头方向
    function toggleCutover() {
      if (index == 0) {
        index = 1
      } else {
        index = 0
      }
      console.log(constraintsList[index]);
    }

    //绑定拍照按钮的单击事件
    $("#capture").click(function () {
      context.drawImage(video, 0, 0);
      var dataURL = canvas.toDataURL("image/jpeg", 0.5);
      localStorage.setItem("facePhoto", dataURL.split(",")[1]);
      $.showLoading();
      $(".weui-toast_content").text("照相中");
      $("#video").hide()
      setTimeout(function () {
        $.hideLoading();
        msgInfo("拍照成功")
        setTimeout(() => {
          goPage("user_physical_exa.htm");
        }, 1000);
      }, 2000);
    });
    //绑定切换摄像头的方向
    $(".img_camera").click(function () {
      toggleCutover();
      capture();
    });
  };
</script>

<body>
  <div class="fix-top" style="z-index: 100">
    <div class="weui-btn_primary weui-header">
      <div class="weui-header-left">
        <a id="btnBack" class="icon icon-109"></a>
      </div>
      <h1 class="weui-header-title">体质检测</h1>
    </div>
  </div>
  <div id="takePhoto">
    <img src="../res/images/icon_camera.png" alt="" class="img_camera" style="z-index: 999" />
    <img src="../res/images/img_signal.png" alt="" class="img_signal" style="z-index: 999" />
    <img src="../res/images/img_face.png" class="img_face" alt="" />
    <video id="video" autoplay muted style="
          position: absolute;
          width: 62%;
          height: 370px;
          margin: 0px 22% 0 20%;
        "></video>
    <canvas id="canvas" width="700" height="740" style="
          position: absolute;
          width: 350px;
          height: 370px;
          margin: 20px 22% 0 20%;
        "></canvas>
  </div>
  <a class="weui-btn bg-blue" id="capture" style="width: 70%; background-color: #1189ff; margin-top: 400px">脸像检测</a>
  <div class="careful">
    <div class="icon">
      <img src="../res/images/icon_tips.png" alt="" style="width: 41px; height: 41px" />
    </div>
    <div class="message">
      <p>1.请尽量将脸像置于框中</p>
      <p>2.保持稳定，点击脸项检测</p>
    </div>
  </div>

  <div class="messageBox">
    <div class="title">特别提醒</div>
    <div class="content">该检测不作为疾病诊断与治疗依据。对于已有医生确诊的疾病，应遵医嘱积极治疗。小程序中所提及的内容，旨在帮助您了解自身的身体素质，</div>
    <div class="tip">参与检测即视为接受以上声明。</div>
    <div class="button">已知晓，开始检测</div>
  </div>
  <div class="backGround"></div>
</body>

</html>